@charset "UTF-8";

@import '~/scss/themes/index.scss';

/*******************************
          外边距
*******************************/
$m-size-map: (
  'xxs': (
    name: '-xxs',
    size: 0.4,
  ),
  'xs': (
    name: '-xs',
    size: 0.6,
  ),
  'sm': (
    name: '-sm',
    size: 0.8,
  ),
  'default': (
    name: '',
    size: 1,
  ),
  'md': (
    name: '-md',
    size: 1.2,
  ),
  'lg': (
    name: '-lg',
    size: 1.5,
  ),
  'xl': (
    name: '-xl',
    size: 2,
  ),
  'none': (
    name: '-none',
    size: 0,
  ),
);

@each $label, $value in $m-size-map {
  $name: map-get($value, name);
  $size: map-get($value, size);

  /*--------------
     外边距
  ---------------*/
  .ui-m#{$name} {
    margin: $v-spacing-md * $size $h-spacing-md * $size;
  }

  .ui-m-v#{$name} {
    margin-top: $v-spacing-md * $size;
    margin-bottom: $v-spacing-md * $size;
  }
  .ui-m-h#{$name} {
    margin-left: $h-spacing-md * $size;
    margin-right: $h-spacing-md * $size;
  }

  .ui-m-l#{$name} {
    margin-left: $h-spacing-md * $size;
  }
  .ui-m-t#{$name} {
    margin-top: $v-spacing-md * $size;
  }
  .ui-m-r#{$name} {
    margin-right: $h-spacing-md * $size;
  }
  .ui-m-b#{$name} {
    margin-bottom: $v-spacing-md * $size;
  }

  /*--------------
     内边距
  ---------------*/
  .ui-p#{$name} {
    padding: $v-spacing-md * $size $h-spacing-md * $size;
  }

  .ui-p-v#{$name} {
    padding-top: $v-spacing-md * $size;
    padding-bottom: $v-spacing-md * $size;
  }
  .ui-p-h#{$name} {
    padding-left: $h-spacing-md * $size;
    padding-right: $h-spacing-md * $size;
  }

  .ui-p-l#{$name} {
    padding-left: $h-spacing-md * $size;
  }
  .ui-p-t#{$name} {
    padding-top: $v-spacing-md * $size;
  }
  .ui-p-r#{$name} {
    padding-right: $h-spacing-md * $size;
  }
  .ui-p-b#{$name} {
    padding-bottom: $v-spacing-md * $size;
  }
}
